<template>
    <div class="twarp">
        <div class="form-border-body box-order">
            <h3>请确认您所选择的回报项信息和购买数量</h3>
            <table class="table-initiate">
                    <thead>
                    <tr>
                        <th style="width:280px">项目名称</th>
                        <th style="width:140px">发起人</th>
                        <th  style="width:320px">回报内容</th>
                        <th style="width:100px">回报数量</th>
                        <th style="width:90px">支持单价</th>
                        <th style="width:90px">配送运费</th>
                    </tr>
                    </thead>
                <tbody   v-for="(val,ind) in result" :key="ind">
                    
                    <tr>
                      
                        <td>{{val.c_name}}</td>
                        <td>{{val.c_company}}</td>
                        <td>{{val.c_content}}</td>
                        <td>
                            <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字" :step="1"></el-input-number>
</td>
                        <td class="danjia">￥{{val.c_price}}</td>
                        <td>免运费</td>
                    </tr>
                </tbody>
            </table>

            <div class="jiesuan clearfix">
                <div class="box-order-total">
                    总价(含运费)：<span class="qian">￥{{price*num1}}</span>
                </div>
                <div class="box-order-total">
                   <span>姓名:<i>{{formData.name}}</i></span>
                    <span>电话号:<i>{{formData.number}}</i></span>
                    <span>收货地址:<i>{{xxaddress}}</i></span>
                </div>
                <div class="box-order-total">
                    <el-button type="text" @click="dialogFormVisible = true" v-if="isaddress">添加收获地址</el-button>
                   <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :append-to-body="true">
  <el-form :model="formData" :rules="formRule" ref="formData">
      <el-form-item>
      <el-col :span="12">
        <el-form-item prop="name">
            <el-input type="text" v-model="formData.name" placeholder="姓名"></el-input>
        </el-form-item>
        </el-col>
         <el-col :span="12">
        <el-form-item prop="number" >
          <el-input v-model="formData.number" placeholder="电话号"></el-input>
        </el-form-item>
         </el-col>
         </el-form-item>
        <el-form-item required>
             <el-col :span="8">
                 <el-form-item porp="sheng">
              <el-select
      v-model="formData.sheng"
      @change="choseProvince"
      placeholder="省级地区">
      <el-option
        v-for="item in province"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    </el-form-item>
    </el-col>
     <el-col :span="8">
         <el-form-item prop="shi">
    <el-select
      v-model="formData.shi"
      @change="choseCity"
      placeholder="市级地区">
      <el-option
        v-for="item in shi1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    </el-form-item>
     </el-col>
      <el-col :span="8">
          <el-form-item prop="qu">
    <el-select
      v-model="formData.qu"
      @change="choseBlock"
      placeholder="区级地区">
      <el-option
        v-for="item in qu1"
        :key="item.id"
        :label="item.value"
        :value="item.id">
      </el-option>
    </el-select>
    </el-form-item>
      </el-col>
      </el-form-item>
      <el-form-item prop="address">
          <el-input type="textarea" placeholder="详细地址" v-model="formData.address"></el-input>
           </el-form-item>
        </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm(formData)">确 定</el-button>
    <!-- <el-button type="primary" @click="sub"></el-button> -->
    <div v-if="!isaddress">提交</div>
  </div>
</el-dialog>
 <div v-if="!isaddress" class="pay"  @click="pay">
     <button>提交</button>
 </div>
                    </div>
            </div>

    </div>
    </div>
</template>

<script>
export default {
data () {
   var checkPhone = (rule, value, callback) => {
        if (!value) {
            this.ustatus=false;
          return callback(new Error('手机号不能为空'))
          
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        //   console.log(reg.test(value));
          if (reg.test(value)) {
              this.ustatus=true;
            callback();
          } else {
              this.ustatus=false;
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };
    return {
         num1: 1,
         result:"",
         price:"",
         name:"",
         img:"",
         time:"",
         day:"",
         dialogFormVisible: false,
         mapJson:'../static/json/map.json',
      province:'',
    //   sheng: '',
    //   shi: '',
      shi1: [],
    //   qu: '',
      qu1: [],
      city:'',
      block:'',
      datas:"",
      xxaddress:"",
      isaddress:true,
      formData:{
         name: '',
          number:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          sheng:'',
          shi:'',
          qu:'',
          address:''
        },
         formRule:{
            name: [{required: true, message: '不能为空', trigger: 'blur'},
                {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
            number: [{required: true,validator: checkPhone, trigger: 'blur'}],
            sheng: [
            { required: true,trigger: 'change' }
          ],  
           shi: [
            { required: true,trigger: 'change' }
          ], 
           qu: [
            { required: true,trigger: 'change' }
          ], 
          address: [{required: true, message: '不能为空', trigger: 'blur'}],

        }
    }
},
methods: {
     handleChange(value) {
        console.log(value);
      },
        getCityData:function(){
        var that = this
        this.$axios.get(this.mapJson).then(function(response){
          if (response.status==200) {
            var data = response.data;
            // this.dartas=data;
            // console.log(data)
            // this.date1=response.data;
            that.province = []
            that.city = []
            that.block = []
            // 省市区数据分类
            for (var item in data) {
              if (item.match(/0000$/)) {//省
                that.province.push({id: item, value: data[item], children: []})
              } else if (item.match(/00$/)) {//市
                that.city.push({id: item, value: data[item], children: []})
              } else {//区
                that.block.push({id: item, value: data[item]})
              }
            }
            // 分类市级
            for (var index in that.province) {
              for (var index1 in that.city) {
                if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                  that.province[index].children.push(that.city[index1])
                }
              }
            }
            // 分类区级
            for(var item1 in that.city) {
              for(var item2 in that.block) {
                if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                  that.city[item1].children.push(that.block[item2])
                }
              }
            }
            that.datas=data;
          }
          else{
            console.log(response.status)
          }
        }).catch(function(error){console.log(typeof+ error)})
      },
      // 选省
      choseProvince:function(e) {
        for (var index2 in this.province) {
          if (e === this.province[index2].id) {
            this.shi1 = this.province[index2].children
            this.shi = this.province[index2].children[0].value
            this.qu1 =this.province[index2].children[0].children
            this.qu = this.province[index2].children[0].children[0].value
            this.E = this.qu1[0].id
          }
        }
      },
      // 选市axios 
      choseCity:function(e) {
        for (var index3 in this.city) {
          if (e === this.city[index3].id) {
            this.qu1 = this.city[index3].children
            this.qu = this.city[index3].children[0].value
            this.E = this.qu1[0].id
            // console.log(this.E)
          }
        }
      },
      // 选区
      choseBlock:function(e) {
        this.E=e;
        // console.log(this.E)
      },
       submitForm(formName) {

           console.log(formName);
          this.xxaddress=this.datas[(formName.sheng)]+this.datas[(formName.shi)]+this.datas[(formName.qu)]+formName.address;
          console.log(this.xxaddress);
        this.$refs.formData.validate((valid) => {
          if (valid) {
              this.isaddress=false;
            this.dialogFormVisible = false;
            console.log(this.isaddress);
            console.log(this.xxaddress);
            // console.log(valid);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      pay(){
        //    localStorage.setItem(c_id,this.$route.query.tobuy);
        //    localStorage.setItem( cc_num,this.num1);
        // localStorage.cc_num=this.num1;
        // localStorage.cc_name=this.name;
        // localStorage.cc_price=this.price;
        // localStorage.cc_img=this.img;
        // localStorage.cc_time=this.time;
        //           this.$router.push({path:"/address",
        //   query:{
        //       c_id:this.$route.query.tobuy
        //   }});
        //    localStorage.setItem(cc_name,this.name);
        //    localStorage.setItem(cc_price,this.price);
        //    localStorage.setItem(cc_img,this.img);
        //    localStorage.setItem(cc_time,this.time);
          this.$confirm('点击后将会自动付款，您的姓名是：'+this.formData.name+'，电话号是：'+this.formData.number+'，地址是：”'+this.xxaddress+'“，您确定继续吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log(this.xxaddress)
               this.$axios.post("http://127.0.0.1:8081/client/topay",{
                   c_id:this.$route.query.tobuy,
                    u_id:sessionStorage.getItem("userid"),
                    cc_num:this.num1,
                    cc_name:this.name,
                    cc_price:this.price*this.num1,
                    cc_img:this.img,
                    cc_time:this.time,
                    cc_address:this.xxaddress,
                    cc_day:this.day,
                    u_name:this.formData.name,
                    u_number:this.formData.number
               }).then(res=>
               {
                   console.log(res.data)
                //    if(res.data.status==1)
                //    {
                //         this.$message({
                //         type: 'success',
                //         message: res.data.msg
                //     });
                //    }
                //    else{
                //         this.$message({
                //         type: 'warning',
                //         message:res.data.msg
                //     });
                //    }
                   this.$router.push({path:"/mycrowd",
          query:{
              c_id:this.$route.query.tobuy
          }});
               })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
},
created () {
   this.$axios.post("http://127.0.0.1:8081/client/crowdproductid",{
        c_id:this.$route.query.tobuy
    }).then(res=>
    {
        console.log(res.data.reslut[0]);
        this.result=res.data.reslut[0];
        this.name=this.result.c_name;
        this.price=this.result.c_price;
        this.img=this.result.cs_img;
        this.time=this.result.c_fhtime;
        this.day=this.result.c_day;
        // console.log(this.result)
        this.result=JSON.stringify(this.result);
        this.result="["+this.result+"]";
        this.result=JSON.parse(this.result);
        
        console.log(this.result);
    }) ;
     this.getCityData(); 
},
mounted () {
    
   
},

}
</script>

<style>
.twarp{
    width: 100%;
    background: #f4f4f4;
    padding:20px 0;
}
.form-border-body{
    width: 1080px;
    padding: 30px 58px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    /* display:inline-block */
}
.form-border-body h3{
    margin-bottom: 20px;
}
.table-initiate{
    width: 100%;
    color: #444;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #e0e0e0;
}
.table-initiate tr,.table-initiate td{
        border: 1px solid #e0e0e0;
    text-align: center;
}
.table-initiate th{
    line-height: 38px;
    font-size: 14px;
    text-align: center;
    background: #f4f4f4;
}
.table-initiate td{
        padding: 10px;
    line-height: 22px;
    word-break: break-all;
}
.el-input-number {
  width: 130px;
}
.danjia{
    color: #ea0000
}
.jiesuan{
    padding-top:20px;
    border-top:1px solid #e0e0e0;
    margin-top: 20px;  
}
/* .clearfix::after{
    content: "";
    display: block;
    overflow: hidden;
    height: 0;
    clear: both;
} */
.box-order-total{
    width: 100%;
    text-align: right;
    line-height: 40px;
    border-bottom: 15px;
}
.box-order-total .qian{
    font-size: 20px;
    color: #ea0000
}
.box-order-total span{
  margin: 20px;
}
.box-order-total span i{
  color: #c00000;
}
.pay{
     /* float: right;
    display: block;
    height: 40px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px; */
    /* text-align: center; */
    width: 100%;
    text-align: right;
    line-height: 40px;
    border-bottom: 15px; 
    margin-top: 10px;
}
.pay button{
    width: 150px;
    text-align: center;
    height: 40px;
    border: none;
    background: orange;
    line-height: 40px;
    color: #fff;
    letter-spacing: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;

}
</style>
